<!DOCTYPE html>
<html>
<head>
  <title>👥 用户管理</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    :root {
      --primary-color: #4361ee;
      --secondary-color: #3f37c9;
      --success-color: #4cc9f0;
      --info-color: #4895ef;
      --warning-color: #f72585;
      --danger-color: #e63946;
      --light-color: #f8f9fa;
      --dark-color: #212529;
      --row-even-bg: #f8f9fa;
      --row-odd-bg: #ffffff;
    }
    
    body {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      min-height: 100vh;
      max-width: 1440px;
      margin: 0 auto;
    }
    
    .header-gradient {
      background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
      color: white;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .card {
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      border: none;
      margin-bottom: 20px;
    }
    
    .table-container {
      background: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    
    .table th {
      background-color: var(--primary-color);
      color: white;
    }
    
    /* 交替行颜色 */
    .table-striped tbody tr:nth-of-type(even) {
      background-color: var(--row-even-bg);
    }
    
    .table-striped tbody tr:nth-of-type(odd) {
      background-color: var(--row-odd-bg);
    }
    
    .btn-gradient {
      background: linear-gradient(120deg, var(--primary-color), var(--info-color));
      border: none;
      color: white;
    }
    
    .btn-gradient:hover {
      background: linear-gradient(120deg, var(--secondary-color), var(--primary-color));
      color: white;
    }
  </style>
</head>
<body class="p-4">
  <div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4 header-gradient p-4">
      <h1 class="mb-0">👥 用户管理</h1>
      <div class="d-flex align-items-center">
        <nav class="navbar navbar-expand navbar-dark me-3">
          <div class="navbar-nav">
            <a class="nav-link" href="/"><i class="fas fa-home me-1"></i> 系统首页</a>
            <a class="nav-link" href="/orders"><i class="fas fa-list me-1"></i> 订单管理</a>
            <a class="nav-link" href="/customers"><i class="fas fa-users me-1"></i> 客户管理</a>
            <a class="nav-link active" href="/users"><i class="fas fa-user-cog me-1"></i> 用户管理</a>
          </div>
        </nav>
        <div>
          <a href="/add-user" class="btn btn-light btn-sm me-2">
            <i class="fas fa-plus-circle"></i> ➕ 添加用户
          </a>
        </div>
      </div>
    </div>

    <!-- 用户列表 -->
    <div class="table-container">
      <table class="table table-striped table-hover mb-0">
        <thead>
          <tr>
            <th>用户名</th>
            <th>邮箱</th>
            <th>角色</th>
            <th>国家权限</th>
            <th>状态</th>
            <th>最后登录</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {% for user in users %}
          <tr>
            <td>
              <strong>{{ user.username }}</strong>
            </td>
            <td>
              {{ user.email or '-' }}
            </td>
            <td>
              {% if user.role == 'root' %}
                <span class="badge bg-danger">超级管理员</span>
              {% elif user.role == 'manager' %}
                <span class="badge bg-primary">管理员</span>
              {% elif user.role == 'user' %}
                <span class="badge bg-success">普通用户</span>
              {% endif %}
            </td>
            <td>
              {% if user.country %}
                {{ user.country }}
              {% else %}
                <span class="text-muted">-</span>
              {% endif %}
            </td>
            <td>
              {% if user.is_active %}
                <span class="badge bg-success">启用</span>
              {% else %}
                <span class="badge bg-secondary">禁用</span>
              {% endif %}
            </td>
            <td>
              {% if user.last_login %}
                {{ user.last_login.strftime('%Y-%m-%d %H:%M') }}
              {% else %}
                <span class="text-muted">从未登录</span>
              {% endif %}
            </td>
            <td>
              <a href="/edit-user/{{ user.id }}" class="btn btn-sm btn-outline-primary">编辑</a>
              {% if user.is_active %}
                <a href="/deactivate-user/{{ user.id }}" class="btn btn-sm btn-outline-secondary" 
                   onclick="return confirm('确定要禁用此用户吗？')">禁用</a>
              {% else %}
                <a href="/activate-user/{{ user.id }}" class="btn btn-sm btn-outline-success">启用</a>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</body>
</html>